<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-row type="flex" align="middle" justify="start">
        <div class="search-item">
          <span class="label">提现方式：</span>
          <a-input-search placeholder="请输入用户昵称" style="width: 320px" v-model="searchForm.name" />
        </div>
        <div class="search-item">
          <span class="label">起止时间：</span>
          <a-range-picker
            style="width: 320px"
            allowClear
            :show-time="{ format: 'HH:mm' }"
            format="YYYY-MM-DD HH:mm"
            valueFormat="YYYY-MM-DD HH:mm"
            :placeholder="['开始时间', '结束时间']"
            v-model="queryTime"
            @change="changeTime"
          />
        </div>
        <a-button type="primary" @click="gotoSearch"> 查询 </a-button>
      </a-row>
    </a-card>
    <a-card :bordered="false" style="margin-top: 12px">
      <a-row type="flex" align="middle" justify="space-between">
        <a-radio-group :defaultValue="-1" v-model="searchForm.status" @change="onOptionChange">
          <a-radio-button v-for="(item, index) in options" :key="index" :value="item.value">
            {{ item.title }}
          </a-radio-button>
        </a-radio-group>
        <a-row type="flex" align="middle" justify="end">
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item key="1" @click="updateAll('status', 1)">批量审核 </a-menu-item>
              <a-menu-item key="2" @click="updateAll('status', 0)">批量拒绝 </a-menu-item>
              <a-menu-item key="5" @click="updateAll('is_delete', 1)">批量删除</a-menu-item>
            </a-menu>
            <a-button> 批量设置 <a-icon type="down" /> </a-button>
          </a-dropdown>
        </a-row>
      </a-row>
      <div v-show="selectedRowKeys.length" class="select-title" style="margin-bottom: 16px">
        <a-alert :message="`已选择 ${selectedRowKeys.length} 项`" type="info" show-icon />
      </div>
      <a-table
        style="margin-top: 16px"
        ref="tableList"
        @mouseleave.native="onMouseLeaveTable"
        :columns="columns"
        :data-source="dataSource"
        :rowSelection="{ selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange }"
        :row-key="(record) => record.id"
        :pagination="{
          total: this.totalCount,
          showSizeChanger: true,
          onChange: this.tablePageChange,
          onShowSizeChange: this.paginationSizeChange,
        }"
        :loading="loading"
        :customRow="
          (record, index) => {
            return {
              on: {
                mouseenter: (e) => {
                  this.currentRowId = record.id
                },
              },
            }
          }
        "
      >
        <!-- 提现方式 -->
        <template slot="cash_type" slot-scope="text, item">
          <span>{{ item.cash_type | transCashType }}</span>
        </template>
        <!-- 提现金额 -->
        <template slot="price" slot-scope="text, item">
          <span>¥{{ item.price }}</span>
        </template>
        <!-- 操作 -->
        <span class="table-action" slot="action" slot-scope="text, goods">
          <a @click="onEdit(goods.id)">编辑</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
            <a-menu slot="overlay">
              <a-menu-item v-show="goods.use_attr == 1">
                <a href="javascript:;" @click="editAttr(goods)">编辑规格</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="showQscode(goods.id)">小程序二维码</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="copyUrl(goods.id)">复制小程序链接</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="delGoodById(goods.id)">删除</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      searchForm: {
        name: '',
        dateStart: '',
        dateEnd: '',
        status: -1,
      },
      queryTime: [],
      options: [
        {
          title: '全部',
          value: -1,
        },
        {
          title: '待审核',
          value: 0,
        },
        {
          title: '已审核',
          value: 1,
        },
        {
          title: '已拒绝',
          value: 2,
        },
      ],
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          key: 'id',
        },
        {
          title: '提现方式',
          dataIndex: 'cash_type',
          key: 'cash_type',
          scopedSlots: { customRender: 'cash_type' },
        },
        {
          title: '提现金额',
          dataIndex: 'price',
          key: 'price',
          sorter: (a, b) => a.price - b.price,
          scopedSlots: { customRender: 'price' },
        },
        {
          title: '申请时间',
          dataIndex: 'create_time',
          key: 'create_time',
          defaultSortOrder: '',
          sorter: (a, b) => a.create_time - b.create_time,
          scopedSlots: { customRender: 'create_time' },
        },
        {
          title: '审核时间',
          dataIndex: 'update_time',
          key: 'update_time',
          defaultSortOrder: '',
          sorter: (a, b) => a.update_time - b.update_time,
          scopedSlots: { customRender: 'update_time' },
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          defaultSortOrder: '',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      dataSource: [],
      selectedRowKeys: [],
      totalCount: 0,
      pageSize: 10,
      pageNo: 1,
      currentRowId: '',
      loading: false,
    }
  },
  watch: {},
  computed: {},
  filters: {
    transCashType(val) {
      const arr = ['', '支付宝', '微信']
      return arrp[val] || ''
    },
  },
  mounted() {},
  methods: {
    // 切换筛选时间
    changeTime(e) {
      if (e.length) {
        this.searchForm.dateStart = e[0]
        this.searchForm.dateEnd = e[1]
      } else {
        this.searchForm.dateStart = ''
        this.searchForm.dateEnd = ''
      }
    },
    gotoSearch() {
      console.log(this.searchForm)
    },
    onOptionChange(val) {
      let status = val.target.value
      console.log(status)
    },
    onMouseLeaveTable(e) {
      if (e.relatedTarget && e.relatedTarget.className.indexOf('popover') != -1) {
        return
      }
      this.currentRowId = ''
    },
    // 表格选中
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    // 分页请求
    tablePageChange(e) {
      console.log(e)
      this.pageNo = e
    },
    // 分页器页数修改回调
    paginationSizeChange(current, size) {
      console.log(current, size)
      this.pageNo = current
      this.pageSize = size
    },
  },
}
</script>

<style scoped>
.search-item {
  margin-right: 50px;
}
</style>
